<template>
  <div class="main">
    <a-form id="formLogin" class="user-layout-login" ref="formLogin" :form="form" @submit="handleSubmit">
	  <a-form-item>
		<a-input size="large" type="text" placeholder="用户名或手机"
		  v-decorator="['username', {rules: [{ required: true, message: '请输入用户名或手机' }], validateTrigger: 'change'}]">
		  <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
		</a-input>
	  </a-form-item>
	  <a-form-item>
		<a-input size="large" type="password" autocomplete="false" placeholder="密码 / admin"
		  v-decorator="['password', {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}]">
		  <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
		</a-input>
	  </a-form-item>
      <a-form-item>
        <a-checkbox v-decorator="['rememberMe']">自动登陆</a-checkbox>
      </a-form-item>
      <a-form-item style="margin-top:24px">
        <a-button size="large" type="primary" htmlType="submit" class="login-button"
          :loading="state.loginBtn" :disabled="state.loginBtn">确定</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
export default {
  data() {
    return {
      formData:{},
      form: this.$form.createForm(this),
      state: {time: 60, loginBtn: false}
    }
  },
  created() {
      let cloud_token = this.$route.query.cloud_token;
	  if(cloud_token != undefined){
		  this.LoginByToken(cloud_token).then((res) => {
		      this.loginSuccess()
		    })
	  }
    },
  methods: {
    ...mapActions(['Login', 'Logout', 'LoginByToken']),
    handleSubmit(e) {
      e.preventDefault()
      const {form: { validateFields }, state, Login} = this
      state.loginBtn = true
      validateFields(['username', 'password'], { force: true }, (err, values) => {
        if (!err) {
          const loginParams = {...values}
          delete loginParams.username
          loginParams['username'] = values.username
          loginParams.password = values.password
          Login(loginParams).then(() => {
              this.loginSuccess()
            }).catch(err => this.requestFailed(err))
            .finally(() => {state.loginBtn = false})
        } else {
          setTimeout(() => {state.loginBtn = false}, 600)
        }
      })
    },
    loginSuccess() {
		this.$router.push({ name: 'dashboard' })
		setTimeout(() => {this.$notification.success({message: '欢迎', description: `${timeFix()}，欢迎回来`})}, 1000)
    },
    requestFailed(err) {
      this.$notification['error']({
        message: '错误',
        description: ((err || {}).data || {}).msg || '请求出现错误，请稍后再试',
        duration: 4
      })
    }
  }
}
</script>
<style lang="less" scoped>
.user-layout-login {
  label {font-size: 14px; }
  .forge-password {font-size: 14px;}
  button.login-button {padding: 0 15px;font-size: 16px;height: 40px;width: 100%;}
  .user-login-other {
    text-align: left;margin-top: 24px;line-height: 22px;
    .item-icon {font-size: 24px;color: rgba(0, 0, 0, 0.2);margin-left: 16px;vertical-align: middle;cursor: pointer;
      transition: color 0.3s;
      &:hover {color: #1890ff;}
    }
    .register {float: right;}
  }
}
</style>